<template>
<div class="helpVue">
    <el-dialog :title="dialogTitle" :visible.sync="newDialogVisible" :custom-class="dialogTitle=='帮助中心'?'dialogWidth':''">
        <el-collapse>
            <el-collapse-item v-for="(item,index) in list" :key='index' :title="item.title" :name="index">
                <div v-for="(ele,idx) in item.children" :key='idx'><span class="itemTitle">{{ele.title}} </span>
                <div class="addfix" v-html="ele.addfix"> </div>
                </div>
            </el-collapse-item>
        </el-collapse>
      <!-- <div v-for="(item,index) in list" :key='index' >
        <div class="title">{{item.title}}</div>
        <div v-for="(ele,idx) in item.children" :key='idx'><span class="itemTitle">{{ele.title}} </span><span class="addfix"> {{ele.addfix}}</span></div>
      </div> -->
    </el-dialog>
</div>
</template>
<script>
/* eslint-disable */ 
export default {
  name: "help",
  props:{dialogVisible:Boolean,dialogTitle:String},
  data() {
    return {
        dialogWidth:'',
        newDialogVisible:this.dialogVisible,
        listOfhelp:[{
        title:'我的资产',
            children:[
                {
                    title:'查看：',
                    addfix:' “我”名下的公司资产，资产列表点击可进入资产详情页，在这里可以发起报修、转移、退回、报废的审批流程。',
                },{
                    title:'报修：',
                    addfix:' 系统会把维修任务提交给系统管理员指定的维修管理员，维修完成后，维修管理员在后台标记完成，资产恢复“在用”状态。',
                },{
                    title:'转移：',
                    addfix:'申请后，系统发起管理员指定的钉钉审批流程，可以在钉钉工作台查看审批状态，审批通后，资产到另一位同事名下。',
                },{
                    title:'退还：',
                    addfix:'申请后，系统发起管理员指定的钉钉审批流程，可以在钉钉工作台查看审批状态，审批通后，资产回到公司闲置状态。',
                },{
                    title:'报废：',
                    addfix:' 申请后，系统发起管理员指定的钉钉审批流程，可以在钉钉工作台查看审批状态，审批通后，资产报废成功。',
                }
            ]
        },{
            title:'资产领用、耗材领用',
            children:[{
                addfix:'进入后首先按照分类，选择要领用的资产（手机端暂不支持多选），选择后点击提交，系统发起管理员指定的钉钉审批流程，可以在钉钉工作台查看审批状态，审批通后，资产领用成功，可在“我的资产”中查看。'
            }]
        }
        ],
        listOfQue:[
            {
                title:'1.初次使用', children:[
                    {addfix:'第一步，入库，在资产管理->资产入库功能中，下载导入模版，将台帐整理到导入模版中，点击“导入资产”导入系统中；<br/>第二步，打印二维码，在资产管理->资产入库功能中，点击“打印设置”，设置打印模版，之后即可在操作列表中，勾选需要打印的二维码，打印好后，黏贴到资产实物上（建议一物一码）；<br/>第三步，发放和领用，在资产管理->出库领用功能中，点击“新增领用单”，根据页面元素输入后，即可将资产批量发放到员工名下。员工也可以在手机端扫描领取资产。'}
                ]
            },
            {
                title:'2.权限设置', children:[
                    {addfix:'系统默认配置的角色和权限供管理员使用，因涉及一些功能和数据权限的展示，默认角色不能删除。如果需要增加和修改，可以在原角色上编辑，或者增加角色；部门主管系统动态同步钉钉组织架构中的动态角色，所以无法编辑，如有变动系统会自动同步；如果看不到某个菜单，说明账户的角色权限没有打开相应的菜单权限。'}
                ]
            },
            {
                title:'3.资产维修', children:[
                    {addfix:'员工报修后，系统会把维修任务提交给系统管理员指定的维修管理员，维修完成后，维修管理员在后台标记完成，资产恢复“在用”状态；处理维修任务和查看维修记录，在“维修任务”菜单中；配置和修改维修管理员，在权限管理->设置维修中，可配置不同分类的资产给不同的部门来维修。'}
                ]
            },
            {
                title:'4.耗材管理', children:[
                    {addfix:'新增耗材时需要绑定分类，所以新建耗材前需要先维护耗材分类；“新增耗材”菜单中可对耗材进行增加、修改、删除；仓库须绑定到部门下，入库后相应部门的员工领用时可见，未入库的耗材或对应部门的仓库没有的耗材，员工领用时不可见;如果公司没有仓库的区分，系统默认所有部门在默认仓库中；'}
                ]
            },
            {
                title:'5.资产视图', children:[
                    {addfix:'资产总览中，可查看公司整体资产情况，部门主管可以查看下属所有部门的资产合计，财务和资产管理员角色，可查看到全公司资产数据。操作记录中，可查看资产维度的操作记录，部门主管、财务、资产管理员对应的数据权限同上。'}
                ]
            },
        ]
    };
  },
  created(){
      this.list = this.dialogTitle=='帮助中心'?this.listOfhelp:this.listOfQue
  },
   watch:{
        dialogVisible:{
            handler(news){
                this.newDialogVisible = news
            },
            immediate: true,
        },
        newDialogVisible(val){
            this.$emit("dialogVisibleChangeFn",val)
        },
        dialogTitle(val){
            this.list = val=='帮助中心'?this.listOfhelp:this.listOfQue
            this.dialogWidth = val=='帮助中心'?'776':''
        }
    },
};
</script>
<style lang="stylus" scoped>
.helpVue
    >>>.el-dialog
        width: 560px;
    >>>.el-dialog__header
        text-align center
        background #ffffff
        line-height 22px
        padding 38px 0 0 12px
        .el-dialog__title
            font-size 22px
            font-weight 550
    >>>.el-dialog__body 
        padding: 30px 90px;
    >>>.el-collapse-item__header
        color: #1F1F21;
        font-size: 16px;
    >>>.el-collapse-item__header,.el-collapse
        border none
    >>>.el-collapse-item__wrap
        border none
    >>>.el-collapse-item__content
        padding-bottom: 0;
        padding-left: 15px;
    .title
        margin 30px 0 10px
        color rgba(50, 150, 250, 1)
        font-size 16px
        text-align left
        font-family SourceHanSansCN-Medium
    .itemTitle
        font-size 12px
        line-height 24px
        font-family SourceHanSansCN-Medium
        color #303133
        font-weight bold
    .addfix
        font-size 14px
        line-height 24px
        color #999999
        font-family SourceHanSansCN-regular 
</style>
<style lang="stylus">
.helpVue
    .dialogWidth
        width 560px

</style>